<?php
echo $this->Html->css(array('cake.generic', 'jNice', 'jquery.jscrollpane', 'nivo-slider', 'template'));
echo $this->Html->script(array('jNice', 'fileuploader'));
echo $this->element("scroll_element", array("cache" => true));
?>

<div id="result">
    <div class="message" id="flashMessage" style="display: none"></div>
    <?php echo $this->Form->create('User', array('action' => 'register', 'class' => 'jNice', 'type' => 'file')); ?>

    <div class="facebookInfo">
        <div class="scrollCont">
            <h2 class="globalTitleH2">FACEBOOK INFO</h2>
            <h3 class="globalSubtitleH3">INTERESTS</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eleifend luctus augue, at sollicitudin nisl consectetur et. Ut blandit nisl congue enim pellentesque at adipiscing sapien vulputate. Nullam consectetur sollicitudin arcu, eget blandit nisl aliquet nec. Phasellus ornare porta nisi quis tempus. Phasellus velit sem, commodo vitae rhoncus nec, ullamcorper vitae orci. Praesent adipiscing, ligula in aliquam pharetra, eros erat fringilla sem, sed egestas orci mauris eget nibh. Aenean</p>
            <h3 class="globalSubtitleH3">MUSIC</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eleifend luctus augue, at sollicitudin nisl consectetur et. Ut blandit nisl congue enim pellentesque at adipiscing sapien vulputate. Nullam consectetur sollicitudin arcu, eget blandit nisl aliquet nec. Phasellus ornare porta nisi quis tempus. Phasellus velit sem, commodo vitae rhoncus nec, ullamcorper vitae orci. Praesent adipiscing, ligula in aliquam pharetra, eros erat fringilla sem, sed egestas orci mauris eget nibh. Aenean faucibus ornare diam quis bibendum. Aenean ornare ultricies adipiscing. Vivamus nibh nulla, convallis id euismod sed, commodo aliquet justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec lacus at arcu volutpat gravida. Vestibulum tortor nisl, porta at fringilla id, laoreet eu enim.</p>
            <p>Nullam tempus turpis sit amet nisi egestas pharetra. Phasellus nibh ante, semper nec imperdiet eu, consequat sit amet nibh. Sed pharetra purus vel leo faucibus dictum non in justo. Mauris dignissim, dui nec lobortis ultrices, nulla neque laoreet enim, ultricies pharetra mauris massa quis lorem. Sed dapibus sagittis vehicula. Praesent placerat nulla in lorem convallis pulvinar. Aenean porta vehicula pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis urna, condimentum sit amet porttitor quis, fringilla sit amet tortor. In iaculis luctus nibh sed aliquam. Sed et nisl a libero vehicula consectetur. Fusce tristique ullamcorper sapien nec tincidunt. In eget libero sit amet lectus porta consequat a consequat enim.</p>
        </div>
    </div>
    <div class="profVision">
        <div class="profScroll">

            <h3 class="profileLabel">profile image</h3>
            <div id="profile_image"  style="height:80px">		
                <noscript>			
                <p>Please enable JavaScript to use file uploader.</p>
                <!-- or put a simple form for upload here -->
                </noscript>         
            </div>
            <label generated="true" class="profileImage error" style="display: none"></label>            
            <h3 class="profileLabel">INSPIRATION image</h3>
            <div id="inspiration_image" style="height:80px">		
                <noscript>			
                <p>Please enable JavaScript to use file uploader.</p>
                <!-- or put a simple form for upload here -->
                </noscript>         
            </div>
            <label generated="true" class="inspirationImage error" style="display: none"></label>
            
            <h3 class="profileLabel">User Name</h3>
            <?php echo $this->Form->input('username', array('value' => $this->data['User']['username'], 'label' => false, 'div' => false)); ?>
            <label class="UserUsername error"></label>
            <h3 class="profileLabel">Email Address</h3>
            <?php echo $this->Form->input('email', array('label' => false, 'div' => false)); ?>
            <label class="UserEmail error"></label>
            <h3 class="profileLabel">Password</h3>
            <?php echo $this->Form->input('password', array('label' => false, 'div' => false)); ?>
            <label class="UserPassword error"></label>
            <h3 class="profileLabel">Confirm Password</h3>
            <?php echo $this->Form->input('cpassword', array('label' => false, 'div' => false, 'type' => 'password')); ?>
            <label class="UserCpassword error"></label>
            <h3 class="profileLabel">VISION</h3>
            <div class="textAreaWrapper">
                <div class="textAreaRight">
                    <div class="textAreaRptr">
                        <div class="textScroller edtProfile" style="height:93px; width:382px;">
                            <?php echo $this->Form->textarea('vision', array('div' => false, 'label' => false)); ?>                            
                        </div>
                    </div>
                </div>              
            </div>           
            <label class="UserVision error"></label>          

            <h3 class="profileLabel">FOCUS AREAS</h3>    
            <div class="checkBoxes" style="height:120px;">
                <?php foreach ($focus_areas as $key => $val) { ?>
                    <div style="width:125px;float:left"><input type="checkbox" name="data[User][focus_area_id][]" value="<?php echo $key; ?>" /><label><?php echo $val; ?></label></div>
                <?php } ?>       
                <label generated="true" class="focusArea error" style="display: none"></label>

                <div class="clear">&nbsp;</div>
            </div>


            <div class="agreement" style="height:120px;"><span>I agree to the <a href="javascript:void(0);">terms and conditions</a></span> <?php echo $this->Form->checkbox('term_agree', array('div' => false, 'label' => false, 'checked' => 'checked', 'hiddenField' => false)); ?>
                <br /><br /><label class="UserTermAgree error" style="display: none"></label>
            </div>
        </div>
    </div>
    <div class="clear">&nbsp;</div>

    <button type="submit" class="saveInfo">SAVE</button>
</form>
<?php // echo $ajax->submit('Submit', array('url' => array('controller' => 'users', 'action' => 'add'), 'update' => 'result', 'class' => 'saveInfo'));  ?>
</div>
<script type="text/javascript">
    jQuery(document).ready(function(){        
        jQuery("form#UserRegisterForm").submit(function() {            
            jQuery(".error").html("");
            data=jQuery(this).serialize();
            url=jQuery(this).attr('action');  
            jQuery("form#UserRegisterForm").ajaxStart(function() {
                jQuery(this).css({opacity:'0.5'});  
                //jQuery('<div id="loader"></div>').insertBefore(this);                    
            }).ajaxStop(function() {
                jQuery(this).css({opacity:'1'});
                // jQuery('<div id="loader"></div>').remove();
            }).ajaxError(function(a, b, e) {
                throw e;
            });
                
            jQuery.ajax({
                type: 'POST',
                url: url,
                data: data,
                success:function(data){
                    if(data.success){                        
                        jQuery('form#UserRegisterForm').css({opacity:'0.5'});  
                        jQuery("#flashMessage").html(data.success).show().fadeIn("slow",function(){
                            setTimeout('disablePopup();',2000);
                        });
                        
                    }
                    if(data.errors.profile_image){                        
                        jQuery(".profileImage").html(data.errors.profile_image).show().fadeIn("slow");
                    }
                    if(data.errors.inspiration_image){                        
                        jQuery(".inspirationImage").html(data.errors.inspiration_image).show().fadeIn("slow");
                    }
                    if(data.errors.username){                        
                        jQuery(".UserUsername").html(data.errors.username).show().fadeIn("slow");
                    }
                    if(data.errors.email){                        
                        jQuery(".UserEmail").html(data.errors.email).show().fadeIn("slow");
                    }
                    if(data.errors.password){                        
                        jQuery(".UserPassword").html(data.errors.password).show().fadeIn("slow");
                    }
                    if(data.errors.cpassword){                        
                        jQuery(".UserCpassword").html(data.errors.cpassword).show().fadeIn("slow");
                    }
                    if(data.errors.vision){                        
                        jQuery(".UserVision").html(data.errors.vision).show().fadeIn("slow");
                    }
                    if(data.errors.focus_area_id){                        
                        jQuery(".focusArea").html(data.errors.focus_area_id).show().fadeIn("slow");
                    }
                    if(data.errors.term_agree){
                        jQuery(".agreement").attr("style","padding-top:0;height:50px");
                        jQuery(".UserTermAgree").html(data.errors.term_agree).show().fadeIn("slow");
                    }
                },
                dataType: 'JSON'
            });
            return false; 
            
        });
        // show a simple loading indicator
        //        var loader = jQuery('<div id="loader"><img src="<?php echo Configure::read('baseUrl'); ?>img/loading.gif" alt="loading..." /></div>')
        //			.css({position: "relative", top: "1em", left: "25em"})
        //			.appendTo("body")
        //			.hide();
        //        jQuery().ajaxStart(function() {
        //            //loader.show();
        //            jQuery('.profScroll').css({opacity:'0.5'});
        //        }).ajaxStop(function() {
        //              //loader.hide();
        //              jQuery('.profScroll').css({opacity:'1'});
        //        }).ajaxError(function(a, b, e) {
        //            throw e;
        //        });
        //
        //        var v = jQuery("#UserAddForm").validate({
        //            rules: {
        //                email:{
        //                    'required':true,
        //                    'email':true,
        //                    remote: {
        //                        url: baseUrl+"users/emailcheck",
        //                        type: "post",
        //                        data: {
        //                            email: function() {
        //                                return jQuery("#email").val();
        //                            }
        //                        }
        //                    }
        //
        //                } ,
        //                password: 'required',
        //                cpassword: {
        //                    required: true,
        //                    equalTo: '#password'
        //                },             
        //                username: {
        //                    required: true,                       
        //                    remote: {
        //                        url: baseUrl+"users/usercheck",
        //                        type: "post",
        //                        data: {
        //                            username: function() {
        //                                return jQuery("#username").val();
        //                            }
        //                        }
        //                    }
        //                }
        //            },
        //            submitHandler: function(form) {
        //                jQuery(form).ajaxSubmit({
        //                    target: "#result"
        //                });
        //            }
        //        });


    });


</script>